<template>
  <div class="container">
    <van-tabs v-model="active" title-active-color="#DBB47F" color="#DBB47F">
      <van-tab title="待处理">
        <div  v-if="unFinish.length != 0">
          <div class="content" >
            <div
              class="item"
              v-for="(item,index) in unFinish"
              :key="'aa'+index"
              @click="detail(item.id,item.productName)"
            >
              <div>
                <img src="./../assets/images/mine/daikuan.png" alt />
              </div>
              <div>
                <div>{{item.productName}}</div>
                <div>{{item.createDate}}</div>
              </div>
              <div>
                <img src="./../assets/images/mine/jiantou.png" alt />
              </div>
            </div>
          </div>
        </div>
        <div class="nodata" v-if="unFinish.length == 0">暂无数据</div>
      </van-tab>
      <van-tab title="已处理">
        <div class="content" v-if="finish.length != 0">
          <div
            class="item"
            v-for="(item,index) in finish"
            :key="'aa'+index"
            @click="detail(item.id,item.productName)"
          >
            >
            <div>
              <img src="./../assets/images/mine/daikuan.png" alt />
            </div>
            <div>
              <div>{{item.productName}}</div>
              <div>{{item.createDate}}</div>
            </div>
            <div>
              <img src="./../assets/images/mine/jiantou.png" alt />
            </div>
          </div>
        </div>
        <div class="nodata" v-if="finish.length == 0">暂无数据</div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Api from "./../api/api";
import { Toast } from "vant";
export default {
  data() {
    return {
      active: 0,
      unFinish: [],
      finish: []
    };
  },
  methods: {
    findOrder() {
      this.$axios
        .post(
          `${Api.HTTP.findOrder}?customerId=${localStorage.getItem(
            "customerId"
          )}`
        )
        .then(res => {
          console.log(res.data);
          res.data.forEach(el => {
            if (el.state == 0) {
              this.unFinish.push(el);
            } else {
              this.finish.push(el);
            }
          });
        })
        .catch(function(error) {
          Toast("网络错误");
          console.log(error);
        });
    },
    detail(id,name) {
            this.$router.push({
        path: "/BusinessDetail",
        query: {
          id: id,
          name:name
        }
      });

    }
  },
  mounted() {
    this.pubilcM.setTitle("业务");
    this.findOrder();
  }
};
</script>
<style scoped>
.nodata {
  padding: 1rem;
  font-size: 0.4rem;
  text-align: center;
  color: #999;
}
.container {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #f6f5f5;
  overflow: hidden;
  overflow-y: auto;
}
.item {
  display: flex;
  padding: 0.2rem;
  box-sizing: border-box;
  align-items: center;
  background: #fff;
  margin-top: 0.15rem;
}
.item > div:nth-child(1) {
  width: 15%;
}
.item > div:nth-child(2) {
  width: 60%;
}
.item > div:nth-child(3) {
  text-align: right;
  width: 25%;
}
.item > div:nth-child(1) > img {
  width: 0.7rem;
  height: 0.7rem;
}
.item > div:nth-child(3) > img {
  width: 0.2rem;
  height: 0.3rem;
}
.item > div:nth-child(2) :nth-child(1) {
  font-size: 0.3rem;
  font-family: sans-serif;
}
.item > div:nth-child(2) :nth-child(2) {
  color: #999;
  font-size: 0.24rem;
  margin-top: 0.1rem;
}
</style>